<template>
  <a-card :bordered="false" class="card-area">
    <a-row type="flex">
      <detail-list style="width: 100%" :col="2">
        <detail-list-item term="学号">{{ info.xh }}&nbsp;</detail-list-item>
        <detail-list-item term="姓名">{{ info.xm }}&nbsp;</detail-list-item>
        <detail-list-item term="性别">{{ info.xbmc }}&nbsp;</detail-list-item>
        <detail-list-item term="院系">{{ info.ssyxmc }}&nbsp;</detail-list-item>
        <detail-list-item term="专业">{{ info.sszymc }}&nbsp;</detail-list-item>
        <detail-list-item term="方向">{{ info.yjfxmc }}&nbsp;</detail-list-item>
        <detail-list-item term="学制">{{ info.xz }}&nbsp;</detail-list-item>
        <detail-list-item term="导师姓名">{{ info.dsxm }}&nbsp;</detail-list-item>
        <detail-list-item term="个人电话">{{ info.lxdh }}&nbsp;</detail-list-item>
      </detail-list>
    </a-row>
    <p style="color:rgba(0, 0, 0, 0.85);">实践证明:</p>
    <p>
      <img v-if="info.sjzm" style="width:200px" @click="showImg(`${IMG_URL}${info.sjzm}`)" :src="`${IMG_URL}${info.sjzm}`" >
      
      <span v-else>暂无</span>
    </p>
    <p style="color:rgba(0, 0, 0, 0.85);">实践单位指导教师评价:</p>
    <pre style="white-space: pre-wrap;
    word-wrap: break-word;">{{ info.sjdwzdjspj }}</pre>
    <p style="color:rgba(0, 0, 0, 0.85);">自我总结（限定500字）:</p>
    <pre style="white-space: pre-wrap;
    word-wrap: break-word;">{{ info.zwzj }}</pre>
    <p v-if="!isYxRole" style="color:rgba(0, 0, 0, 0.85);">院系评定成绩:</p>
    <p v-if="!isYxRole">{{ info.cjmc || '&emsp;' }}</p>
    <p v-if="!+routerQuery.isCheck" style="color:rgba(0, 0, 0, 0.85);">审核结果:</p>
    <p v-if="!+routerQuery.isCheck">{{  info.shzt == '07' ? "专业学位办已备案" : (info.shzt == '08' ? "专业学位办未备案" : info.shztmc) || ' ' }}</p>
    <a-form v-if="+routerQuery.isCheck" :form="form" layout="vertical">
      <a-form-item v-if="isYxRole" label="成绩评定" style="margin-bottom: 0">
        <a-select
          allowClear
          style="width: 200px;"
          v-decorator="['shcj',
          {
            rules: [{ required: true }],
          }]"
        >
          <a-select-option v-for="i in TYPE0517" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
        </a-select>
      </a-form-item>
      <!-- <a-form-item label="院系意见">
        <a-input style="max-width: 500px;" type="textarea" v-decorator="['shyj']" />
      </a-form-item> -->
      <a-form-item v-else label="专业学位办备案" style="margin-bottom: 0">
        <a-select
          allowClear
          style="width: 200px;"
          v-decorator="['shjg',
          {
            rules: [{ required: true , message: '请选择审核结果'}],
          }]"
        >
          <a-select-option value="07">专业学位办已备案</a-select-option>
          <a-select-option value="08">专业学位办未备案</a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
    <div class="ant-pro-footer-toolbar">
      <a-button style="float: right;margin: 10px 0 0 10px;" @click="$router.back()">返回</a-button>
      <a-button v-if="!+routerQuery.isCheck && info.shzt === '07'" style="float: right;margin-top: 10px;" type="primary" @click="exportWord">导出WORD</a-button>
      <!-- <a-button v-if="+routerQuery.isCheck" type="danger" @click="checkBakc">退回</a-button> -->
      <a-button
        style="float: right;margin-top: 10px;margin-right: 10px;"
        @click="check"
        v-if="+routerQuery.isCheck"
        type="primary"
      >{{ isYxRole ? '完成审核' : '完成备案' }}</a-button>
      <a-button
        style="float: right;margin-top: 10px;margin-right: 10px;"
        @click="jgReturn"
        type="primary"
      >退回</a-button>
      
    </div>
  </a-card>
</template>

<script>
import DetailList from "~/tool/DetailList";
const DetailListItem = DetailList.Item;
import { mapState } from "vuex";

export default {
  components: { DetailList, DetailListItem },
  computed: {
    ...mapState({
      TYPE0517: state => state.app["TYPE0517"]
    }),
    routerQuery() {
      return this.$route.query
    },
    isYxRole() {
      return +this.$route.query.isYxRole
    }
  },
  data() {
    return {
      IMG_URL: process.env.IMG_URL,
      form: this.$form.createForm(this),
      info: {}
    };
  },
  created() {
    this.$store.dispatch("app/setDictionary", "TYPE0517");
    this.getInfo()
  },
  methods: {
    showImg(src){
      const h = this.$createElement;
      this.$info({
        title: '查看',
        width:'auto',
        content: h("img", {
          style: {
            verticalAlign: "middle",
            margin:'0 auto',
            display:'block'
          },
          attrs: {
            src: src
          }
        }),
        onOk() {},
      });
    },
    getInfo() {
      this.$api.degree.zysjjgpjInfo(this.routerQuery.id).then(res => {
        this.info = res.data
      })
    },
    filterOption(value, op) {
      return op.componentOptions.children[0].text.indexOf(value) !== -1
    },
    nsjlbmChange(e) {
      this.form.setFieldsValue({ nsjlbqt: '' })
      this.nsjlbqtRequire = e === '05'
    },
    sjjdmcChange(e) {
      this.form.setFieldsValue({ sjjdmc2: '' })
      this.sjjdmc2Require = e === '其他'
    },
    checkBakc() {
      this.$confirm({
        title: '确定退回该实践结果评价吗?',
        centered: true,
        onOk: () => {
          this.$api.degree.zysjjgpjBack({ id: this.info.id }).then(res => {
            this.getInfo()
            this.$message.success(res.msg)
          })
        },
        onCancel: () => { }
      })
    },
    check() {
      this.form.validateFields((err, values) => {
        if (err) {
          return
        }
        let apiFn = this.isYxRole ? 'zysjjgpjYxCheck' : 'zysjjgpjXwbCheck'
        this.$api.degree[apiFn]({ ...values, id: this.info.id }).then(res => {
          // this.getInfo()
          this.$message.success(res.msg)
          this.$router.back()
        })
      })
    },
    exportWord() {
      this.$export('/degree/zysjjgpj/expZysj', { id: this.routerQuery.id })
    },
    jgReturn(){
      this.$confirm({
        title: '退回提示',
        content: '是否确认退回选中的实践结果?',
        onOk:()=>{
          this.$api.degree.zysjjgpjBack({ id: this.routerQuery.id}).then(res => {
            this.$message.success('成功退回')
            // this.doRefresh()
            this.$router.go(-1)
          })
        },
        onCancel() {},
      });
    }
  }
};
</script>

<style>
</style>
